<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"  
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
   <meta charset="utf-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <meta name="description" content="Bootstrap Admin App + jQuery"/>
   <meta name="keywords" content="app, responsive, jquery, bootstrap, dashboard, admin">
   <title>Angle - Bootstrap Admin Template</title>
   <!-- =============== VENDOR STYLES ===============-->
   <!-- FONT AWESOME-->
   <link rel="stylesheet" th:href="@{/vendor/fontawesome/css/font-awesome.min.css}"/>
   <!-- SIMPLE LINE ICONS-->
   <link rel="stylesheet" th:href="@{/vendor/simple-line-icons/css/simple-line-icons.css}"/>
   <!-- ANIMATE.CSS-->
   <link rel="stylesheet" th:href="@{/vendor/animate.css/animate.min.css}"/>
   <!-- =============== BOOTSTRAP STYLES ===============-->
   <link rel="stylesheet" th:href="@{/css/bootstrap.css}" id="bscss"/>
   <!-- =============== APP STYLES ===============-->
   <link rel="stylesheet" th:href="@{/css/app.css}" id="maincss"/>
</head>

<body>
   <div class="wrapper">
      <div class="block-center mt-xl wd-xl">
         <!-- START panel-->
         <div class="panel panel-dark panel-flat animated bounceInDown">
            <div class="panel-heading text-center">
               <a href="#">
                  <img th:src="@{/img/logo.png}" alt="Image" class="block-center img-rounded"/>
               </a>
            </div>
            <div class="panel-body">
               <p class="text-center pv">登录</p>
               <h4 th:text="${message}"></h4> 
               <h4 th:text="${kickout=='1'?'你的账号已在其它地方登录！':''}"></h4>
               <form role="form" data-parsley-validate="" th:action="@{/login}" method="post" novalidate="novalidate" class="form-group mb-lg">
                  <div class="form-group has-feedback">
                     <input value="123@xxx.com" id="username" name="username" type="email" placeholder="Enter email" autocomplete="off" required="required" class="form-control">
                     <span class="fa fa-envelope form-control-feedback text-muted"></span>
                  </div>
                  <div class="form-group has-feedback">
                     <input value="123456" id="password" name="password" type="password" placeholder="Password" required="required" class="form-control">
                     <span class="fa fa-lock form-control-feedback text-muted"></span>
                  </div>
                  <div class="input-group has-feedback">
                     <input value="qwer" id="randomcode" name="randomcode" type="text" placeholder="randomcode" required="required" class="form-control">
                     <span class="input-group-addon" style="padding: 0;">
                     	<img th:src="@{/validatecodeServlet}" height="34px" width="65px" onclick="random(this)"/>
                     </span>
                  </div>
                  <div class="clearfix">
                     <div class="checkbox c-checkbox pull-left mt0">
                        <label>
                           <input type="checkbox" name="rememberMe">
                           <span class="fa fa-check"></span>Remember Me</label>
                     </div>
                     <div class="pull-right"><a href="/views/recover.html" class="text-muted">Forgot your password?</a>
                     </div>
                  </div>
                  <button type="submit" class="btn btn-block btn-primary mt-lg">Login</button>
               </form>
               <p class="pt-lg text-center">Need to Signup?</p><a href="/views/register.html" class="btn btn-block btn-default">Register Now</a>
            </div>
         </div>
         <!-- END panel-->
         <div class="panel" style="display:block;margin: 0 0 0 0;">
         	<!-- START button group-->
            <div class="btn-group">
               <button id="queding" type="button" class="btn btn-primary mt-lg"><em class="fa fa-check"></em>确定</button>
               <button id="shuaxin" type="button" class="btn btn-purple mt-lg"><em class="icon-refresh"></em>刷新</button>
            </div>
            <!-- END button group-->
         	<div id="vilidateImg" class="panel-body" style="width: 318px;height: 200px;position:relative;padding: 0 0 0 0;">
         		<img alt="vilidateCode" width="318px" height="200px" th:src="@{/validateImgServlet}">
         	</div>
         </div>
      </div>
      <div class="p-lg text-center panel-footer clearfix" style="bottom: 0px;position:fixed;width: 100%;">
         <span>&copy;</span>
         <span>2016</span>
         <span>-</span>
         <span>by</span>
         <br>
         <span>@Coder 小龙</span>
      </div>
   </div>
   <!-- =============== VENDOR SCRIPTS ===============-->
   <!-- MODERNIZR th:src="@{xxxx.min.js}"-->
   <script th:src="@{/vendor/modernizr/modernizr.custom.js}"></script>
   <!-- JQUERY-->
   <script th:src="@{/vendor/jquery/dist/jquery.js}"></script>
   <!-- BOOTSTRAP-->
   <script th:src="@{/vendor/bootstrap/dist/js/bootstrap.js}"></script>
   <!-- STORAGE API-->
   <script th:src="@{/vendor/jQuery-Storage-API/jquery.storageapi.js}"></script>
   <!-- PARSLEY-->
   <script th:src="@{/vendor/parsleyjs/dist/parsley.min.js}"></script>
   <!-- =============== APP SCRIPTS ===============-->
   <script th:src="@{/js/app.js}"></script>
   <script th:inline="javascript">  
      function random(tmp){  
           tmp.src="/validatecodeServlet?rnd="+Math.random();  
      } 
      $(function(){
    	  var tuchArr=[];
    	  $("#vilidateImg img").on("mousedown",function(e){
    		  if(e.which==1&&$("#vilidateImg DIV").length<20){
    			  var offset = $(this).offset();
    			  var relativeX = (e.pageX - offset.left)-12;
    			  var relativeY = (e.pageY - offset.top)-12;
    			  tuchArr.push({"x":relativeX,"Y":relativeY});
    			  $("#vilidateImg").append($("<div>",{"class":"touclick-hov","style":"position:absolute;top:"+relativeY+"px;left:"+relativeX+"px;"}).html("<em class='fa fa-futbol-o fa-spin fa-2x'></em>"));
    		      console.log(tuchArr);
    		  }
    	  });
    	  
    	  //确认
    	  $("#queding").on("click",function(){
    		  debugger;
    		  var param = {"data0":tuchArr[0],"data1":tuchArr[1],"data2":tuchArr[2],"data3":tuchArr[3],"data4":tuchArr[4]};
    		  $.ajax({
    			  url:"/validateTuch",
    			  data:$.param(param),
    			  dataType:"json",
    			  type:"POST",
    			  success:function(ret){
    				  
    			  }
    			  });
    	  });
    	  
    	  //刷新验证图片
		  $("#shuaxin").on("click",function(){
			  tuchArr=[];
			  $("#vilidateImg div").remove(".touclick-hov");
			  $("#vilidateImg img")[0].src="/validateImgServlet?rnd="+Math.random(); 
			  
    	  });
    	  
		  //标记点击事件
    	  $("#vilidateImg").on("click",".touclick-hov",function(e){
			  //移除tuchArr集合的值
    		  var relativeX = $(this).css("left");
			  var relativeY = $(this).css("top");
			  relativeX = relativeX.substring(0,relativeX.length-2)
			  relativeY = relativeY.substring(0,relativeY.length-2)
			  tuchArr = $.grep(tuchArr,function(value){
				  return value.x!=relativeX&&value.y!=relativeY;
			  });
			  //移除选中标记元素
    		  $(this).remove();
    	  })
      });
   </script> 
</body>

</html>